<template>
    <div>

    <div id="box1" >
        <div id="box" @click="listCkick1">
            <div>
                <img src="static/logo.gif" alt="" @click="back">
            </div>
            <div>
                <router-link to="/">首页</router-link>
            </div>
            
            <div>
                <router-link to="/regist" v-if="!isLogin">注册</router-link>
                <router-link to="/fans" v-if="isLogin">关注</router-link>
            </div>
            <div>
                <router-link to="/login" v-if="!isLogin">登录</router-link>
                <router-link to="/new" v-if="isLogin">写日记</router-link>
            </div>
        </div>
        <span 
            v-if="isLogin"
            @click="listCkick"
        >
            <span class="fa fa-reorder kai" v-if="!list"></span>
            <span class="fa fa-close  kais kai" v-if="list"></span>
        </span>
        
        
    </div>
    <transition name="list">
        <NavbarList 
            v-if="list" 
            class="navbarlist"
            @offExit="offExit"
        ></NavbarList>
    </transition>
        
    </div>

</template>

<script>
import {mapState} from 'vuex'
import NavbarList from './NavbarList.vue';
export default {
    data:function(){
        return {
        }
    },
    computed:{
        ...mapState([
            "isLogin",
            "list"
        ])
    },
    components:{
        NavbarList,
    },
    methods:{
        back(){
            history.back();
        },
        offExit(){
           this.list=false;
        },
        listCkick(){
            if(this.list){
                this.$store.commit("list1",false);
            }else{
                this.$store.commit("list1",true);
            }
            
        },
        listCkick1(){
            this.$store.commit("list1",false);
        },
    },
    activated:function(){
        this.$store.dispatch("isLogin2");
    },
    mounted:function(){
        this.$store.dispatch("isLogin2");
    }
}
</script>

<style scoped>
    #box1{
        display: flex;
        height: 44px;
    }
    #box{
        display: flex;
        width: 100%;
    }
    #box div{
        padding: 10px 12px; 
    }
    .kai{
        line-height: 44px;
        text-align: center;
        font-size: 16px;
        display: inline-block;
        width: 50px;
        height: 44px;
    }
    .kais{
        height: 50px;
        background-color: #eee;
    }
    a{
        color: #777;
    }

    /*----------------------*/
    .navbarlist{
        position: absolute;
        width: 100%;
        z-index: 100;
        top: 50px;
    }
    .list-enter{
        top:-50px;
        opacity: 0;
    }
    .list-enter-to{
        top:50px;
        opacity: 1;
    }
    .list-enter-active,.list-leave-active{
        transition: all 0.3s;
        z-index: 8;
    }
    .list-leave{
        top:50px;
        opacity: 1;
    }
    .list-leave-to{
        top:-50px;
        opacity: 0;
    }
</style>